<template>
	<div :class="$style.tab">
		<ul>
			<li v-for="(item,index) in items" :class="[$style.item,{tabActive:curTabIndex===index}]" @click.stop="changeTab(index,item.link)">
					<svg class="icon" aria-hidden="true">
					    <use :xlink:href="item.icon"></use>
					</svg>
					<p :class="$style.title">{{item.name}}</p>
			</li>
		</ul>
	</div>
</template>
<script>
	export default {
		props: {
			items: {
				type: Array,
				default() {
					return [
						{link:'/book',icon:'#icon-shujia',name:'书架'},
						{link:'/home',icon:'#icon-shucheng',name:'书城'},
						{link:'/center',icon:'#icon-account',name:'我的'}
					]
				}
			}
		},
		data() {
			return {
				curTabIndex: this.$store.state.currentTabIndex,
			}
		},
		computed: {
		},
		mounted() {
			// this.changeTab(this.$store.state.currentTabIndex);
		},
		activated() {
		},
		methods: {
			/*切换tab*/
			changeTab(index,link="/home") {
				this.$router.push({path:link});
				return new Promise((resolve,reject) => {
					this.$store.state.currentTabIndex = index;
					console.log('当前tab: '+index);
				});
			}
		}
	}
</script>
<style lang="scss" module>
	.tab {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background-color: #f1f1f1;
		box-sizing: border-box;
		ul {
			height: 120px;
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 32px;
			.item {
				flex: 1;
				text-align: center;
				svg {
					width: 50px;
					height: 50px;
				}
			}
		}
	}
</style>